<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			html, body{
				width: 100%; height: 100%;
				overflow: hidden;
			}
			.msg{
				position: absolute;
				font-weight: 300;
				word-break: keep-all;
			}
		</style>
	</head>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
		$(function(){
			$("button").on("click", function(){
				shoot();
			})
			$("input").on("keypress", function(event){
				if(event.keyCode == 13) {
					shoot();
					$(this).val("");
				}
			})
		})
		function shoot(){
			var $msg = $("<div>");
			$msg.addClass("msg");
			$msg.css("left", $(document).width());
			$msg.css("top", Math.round(Math.random()*$(document).height()) );
			$msg.html( $("input").val() );
			$msg.css("color", randomColor("black"));
			$msg.css("font-size", Math.round(Math.random()*50)+18); 
			$(document.body).append($msg);
			$msg.animate({left:-$msg.width()}, Math.round(Math.random()*20000+10000 ), "linear" ,function(){
				$msg.remove();
			});
		}
	</script>
	<body>
		<input type="text" /><button>发送弹幕</button>
	</body>
</html>
